<template>
  <div class="home">
    <AppTopHead></AppTopHead>
    <div class="banner">
      <Swiper :modules="[SwiperAutoplay, SwiperController, SwiperPagination, SwiperEffectCreative]" :slides-per-view="1"
        :effect="'creative'" :loop="true" :autoplay="{
        delay: 2000,
        disableOnInteraction: true,

      }" :space-between="50" :pagination="{ clickable: true }" :creative-effect="{
        prev: {
          shadow: false,
          translate: ['-20%', 0, -1],
        },
        next: {
          translate: ['100%', 0, 0],
        },
      }">
        <SwiperSlide v-for="(item, index) in images " :key="index">
          <NuxtImg :src="item" />
        </SwiperSlide>
      </Swiper>
      <!-- <el-carousel trigger="click" height="160px">
        <el-carousel-item v-for="(item, index) in images " :key="index">
          <NuxtImg :src="item" />
        </el-carousel-item>
      </el-carousel> -->
    </div>
    <div class="notice">
      <div class="notice-item">
        <NuxtImg src="/img/notice.png" alt="" />
        <div></div>
      </div>
    </div>
    <div class="tablist">
      <div v-for="(item, index) in tablist" :key="index" @click="item.callback(index)">
        <div :class="activeindex == index ? 'active' : ''">
          <NuxtImg v-if="activeindex != index" :src="item.img" alt="" />
          <NuxtImg v-else :src="item.imgactive" alt="" />
          <span>{{ $t(item.lang) }}</span>
        </div>
      </div>
    </div>
    <Transition name="fade">
      <div class="expend" v-if="[3, 6].includes(activeindex)">
        <div>
          <el-select v-model="value" class="select" popper-class="downselect" placeholder="Provedor"
            :fallback-placements="['bottom-start']" size="large">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="value" class="select" popper-class="downselect" placeholder="Tags"
            :fallback-placements="['bottom-start']" size="large">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="value" class="select" popper-class="downselect" placeholder="Jogar" size="large"
            :fallback-placements="['bottom-start']">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div>
          <el-input :prefix-icon="Search" v-model="value1" class="searchinput" size="large" placeholder="" />
        </div>
      </div>
    </Transition>
    <div class="clist">
      <div class="clist-item" v-for="(item, index) in HomeGameList" :key="index">
        <h4>
          <div>
            <NuxtImg :src="item.namelogo" alt="" />
            <strong>{{ $t(item.modulename) }}</strong>
          </div>
          <div @click="
        $openPage('/commonpage')
        ">
            All 6
          </div>
        </h4>

        <dl>
          <dd v-for="(child, ind) in item.children" :class="activeitem == item.modulename + ind ? 'moveY' : ''"
            @click="openurl(child)" @mouseenter="activeitem = item.modulename + ind" @mouseleave="activeitem = ''"
            :key="item.modulename + ind">
            <div class="item-center">
              <span>{{ child.name }}</span>
              <div>
                <NuxtImg class="target" :src="child.topleft" alt="" />
                <NuxtImg lazy="loading" bg="color" :src="child.img" alt="" />
              </div>
            </div>
          </dd>
        </dl>
      </div>
    </div>
    <div class="turntable">
      <div class="title">
        <NuxtImg src="/img/c25.png" alt="" />
        <span>{{ $t("language.home.module5") }}</span>
      </div>
      <NuxtImg src="/img/c16.jpg" alt="" />
      <p>
        {{ $t("language.home.module5text") }}
      </p>
      <div class="btn">{{ $t("language.home.module5btn") }}</div>
    </div>
    <div class="Provider">
      <div class="title">
        <NuxtImg src="/img/c26.png" alt="" />
        <span>{{ $t("language.home.module6") }}</span>
      </div>
      <dl>
        <dd v-for="(item, index) in imglist" :key="index">
          <NuxtImg :src="item" alt="" />
        </dd>
      </dl>
    </div>
    <div class="fg">
      <NuxtImg src="/img/c30.jpg" alt="" />
    </div>
    <div class="bottom-second">
      <h1>
        {{ $t("language.home.module7") }} <span>300%</span><br />
        {{ $t("language.home.module7no") }}
      </h1>
      <h1>{{ $t("language.home.module8") }}</h1>
      <div class="btn">
        {{ $t("language.home.module8btn") }}
      </div>
    </div>
    <AppFooter />
  </div>
</template>
<script setup lang="ts">
import { HomeGameList } from "../utils/gamelist"
import { reactive, ref, shallowReactive, shallowRef } from "vue"
import * as CryptoJS from "crypto-js";
import { Back, Search, Plus, ArrowRight } from '@element-plus/icons-vue'
const images = shallowReactive<string[]>([
  "/img/banner.jpg",
  "/img/banner1.jpg",
  "/img/banner2.jpg",
]);
let store = useStore()
let hastoken = computed<boolean>(() => store.token ? true : false);
//标签页
let activeindex = shallowRef<number>(0);
const tablist = reactive<{ lang: string, img: string, imgactive: string, callback: Function }[]>([
  {
    lang: "language.home.tab1",
    img: "/img/tablist1.png",
    imgactive: "/img/tablist1l.png",
    callback: (index: number) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab2",
    img: "/img/tablist2.gif",
    imgactive: "/img/tablist2.gif",
    callback: (index: number) => {
      activeindex.value = index;
      // openTurn();
      store.$patch({ turnTable: true })
    },
  },
  {
    lang: "language.home.tab3",
    img: "/img/tablist3.png",
    imgactive: "/img/tablist3.png",
    callback: (index: number) => {

      if (hastoken.value) {
        activeindex.value = index;
        store.$patch({ terouro: true })
      } else {
        store.$patch({ loginopen: true });
      }
    },
  },
  {
    lang: "language.home.tab4",
    img: "/img/tablist4.png",
    imgactive: "/img/tablist4l.png",
    callback: (index: number) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab5",
    img: "/img/tablist5.png",
    imgactive: "/img/tablist5l.png",
    callback: (index: number) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab6",
    img: "/img/tablist6.png",
    imgactive: "/img/tablist6l.png",
    callback: (index: number) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab7",
    img: "/img/tablist7.png",
    imgactive: "/img/tablist7l.png",
    callback: (index: number) => {
      activeindex.value = index;
    },
  },
  {
    lang: "language.home.tab8",
    img: "/img/tablist8.png",
    imgactive: "/img/tablist8l.png",
    callback: (index: number) => {
      activeindex.value = index;
      $openPage("/Star");
    },
  },
]);
let activeitem = shallowRef<string>("");
const value = shallowRef("");
const value1 = shallowRef("");

const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
//跳转游戏
let coininfo = computed(() => store.coininfo)
let cointype = computed(() => store.cointype)
let userinfo = computed(() => store.userinfo)
let lang: any = computed(() => store.lang)
let token = computed<string | null | undefined>(() => store.token)
let openurl = async (bigitem: any) => {
  // activeitem.value = item;
  if (token.value == "") {
    store.$patch({ loginopen: true })
    return
  }
  if (bigitem.game_uid) {
    ElLoading.service({
      lock: true,
      background: 'rgba(0, 0, 0, 0.7)',
      customClass: 'el-loading'
    })
    let timestamp = new Date().getTime();

    let { totalCoins } = coininfo.value[cointype.value.toLowerCase()]
    let payload = {
      timestamp,
      agency_uid: "6cc66b6b809048859f15905547f49611",
      member_account: userinfo.value.accounts,
      game_uid: bigitem.game_uid,
      credit_amount: Number(totalCoins) / 100,
      currency_code: cointype.value,
      language: lang.value.lang,
      home_url: "http://192.168.12.111:8088/",
      platform: 2
    }
    // let {totalCoins} =coininfo.value[cointype.value.toLowerCase()]
    // let payload = {
    //   timestamp,
    //   agency_uid: "6cc66b6b809048859f15905547f49611",
    //   member_account: '999',
    //   game_uid: bigitem.game_uid,
    //   credit_amount: "80000",
    //   currency_code: "BRL",
    //   language: "pt",
    //   home_url: "https://c.u7games.com/Game/v1.0/Web/Notify/Back",
    //   platform: 2
    // }
    console.log(payload, 'payload');
    //AES256加密
    const aes_key = CryptoJS.enc.Utf8.parse("ec42141e4fc04606a9de6dbb613a587a");
    function encryptAES256(data: string, aes_key: any): string {
      return CryptoJS.AES.encrypt(data, aes_key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      }).toString();
    }
    //请求    
    await nextTick()
    useOtherPOST(`/game/v1`, {
      method: "dc80cff0e5a94e9cb48c8394877e962b",
      agency_uid: "6cc66b6b809048859f15905547f49611",//替换 key
      timestamp,
      payload: encryptAES256(JSON.stringify(payload), aes_key)
    }).then(({ data }: { data: any }) => {
      console.log(data);
      if (data.value.payload.game_launch_url) {
        // router.push({ path: '/playGame', query: { path: data.payload.game_launch_url } })
        window.open(data.value.payload.game_launch_url)
      }
    }).finally(() => {
      ElLoading.service({
        lock: true,
        background: 'rgba(0, 0, 0, 0.7)',
        customClass: 'el-loading'
      }).close()
      // let time = setInterval(() => {
      //   ElLoading.service({
      //     lock: true,
      //     background: 'rgba(0, 0, 0, 0.7)',
      //     customClass: 'el-loading'
      //   }).close()
      //   clearInterval(time)
      // }, 300)
    });



  }


};

//广告
let imglist = shallowReactive<string[]>([
  "/img/c17.png",
  "/img/c18.png",
  "/img/c19.png",
  "/img/c20.png",
  "/img/c21.png",
  "/img/c22.png",
  "/img/c23.png",
  "/img/c24.png",
]);
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  min-height: 100vh;
  padding: 46px 0 90px 0;

  .banner {
    padding: 0 10px;
    background-color: transparent;

    img {
      width: 100%;
      border-radius: 8px;
      cursor: pointer;
    }
  }

  .notice {
    height: 21px;
    margin: 5px 0;
    padding: 0 10px;

    .notice-item {
      height: 100%;
      padding: 0 5px;
      background-color: #0f1012;
      @include flex(row, space-between, center);
      border-radius: 5px;

      img {

        width: 16px;
      }

      div {
        flex: 1;
        height: 100%;
      }
    }
  }

  .tablist {
    width: 100%;
    padding: 3px 10px 15px;
    overflow-x: auto;
    @include flex(row, flex-start, center);
    flex-wrap: nowrap;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }

    .active {
      background-color: #0a906c;

      span {
        color: #fff;
      }
    }

    div {
      background-color: #32353e;
      height: 36px;
      line-height: 36px;
      border-radius: 5px;

      div {
        padding: 0 10px;
        cursor: pointer;
        @include flex(row, flex-start, center);

        img {
          width: 22px;
          margin-right: 6px;
        }

        span {
          font-size: 16px;
          color: #b5bac8;
          height: 100%;
          white-space: nowrap;
        }
      }
    }

    div+div {
      margin-left: 10px;
    }
  }

  .expend {
    padding: 0 10px;

    >div {
      margin-bottom: 10px;
    }

    >div:nth-child(1) {
      @include flex(row, space-between, center);

      .select+.select {
        margin-left: 10px;
      }
    }

    :deep(.el-select__wrapper) {
      background-color: rgb(39, 42, 48);
      box-shadow: none;
      border: 1px solid #4a4c53;
      border-radius: 10px;
      color: #fff !important;
      outline: none !important;
    }

    :deep(.el-input__wrapper) {
      background-color: rgb(39, 42, 48);
      border-radius: 10px;
      box-shadow: none;
      border: 1px solid #4a4c53;
      color: #fff !important;
      height: 40px;

    }

    :deep(.el-select-dropdown__item.selected) {
      color: #fff !important;
      background-color: rgb(39, 42, 48) !important;
    }

    :deep(.el-select-dropdown .el-select-dropdown__item.selected) {
      color: #fff !important;
      background-color: rgb(39, 42, 48) !important;
    }

    :deep(.el-scrollbar__view) {
      background-color: rgb(39, 42, 48) !important;
      color: #fff !important;
      outline: none !important;
      border: none !important;
      box-shadow: none !important;
    }

    :deep(.el-scrollbar__wrap) {
      outline: none !important;
      border: none !important;
      box-shadow: none !important;
    }

    :deep(.el-select-dropdown) {
      outline: none !important;
      border: none !important;
      box-shadow: none !important;
      background-color: rgb(39, 42, 48) !important;
    }

    :deep(.el-select-dropdown__list) {
      background-color: rgb(39, 42, 48) !important;
      color: #fff !important;
      outline: none !important;
      border: none !important;
      box-shadow: none !important;
    }

    :deep(.el-popper__arrow::before) {
      background-color: rgb(50, 53, 62) !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
    }

    :deep(.el-select-dropdown__item) {
      background-color: rgb(39, 42, 48) !important;
      color: #fff !important;
      outline: none !important;
      border: none !important;
      box-shadow: none !important;
    }

    :deep(.is-hovering) {
      background-color: rgb(50, 53, 62) !important;
      color: #fff !important;
    }
  }

  .clist {
    width: 100%;

    .clist-item {
      padding: 0 10px;
      width: 100%;
      background: url("../assets/img/game_bg.png") no-repeat;
      background-size: cover;

      h4 {
        @include flex(row, space-between, center);
        height: 40px;

        div:nth-child(1) {
          @include flex(row, flex-start, center);
          height: 100%;

          img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
          }

          strong {
            font-size: 20px;
            color: #fff;
          }
        }

        div:nth-child(2) {
          height: 100%;
          width: 26%;
          color: #95979e;
          font-size: 12px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          background-color: #2d2e32;
          border-radius: 11px;
        }
      }

      dl {
        @include flex(row, space-between, flex-start);
        width: 100%;
        flex-wrap: wrap;

        .moveY {
          transform: translateY(-15px);
        }

        dd {
          padding-top: 14px;
          transition: all 0.5s ease-out;
          transform: translateY(0);
          cursor: pointer;
          width: 31%;

          .item-center {
            width: 100%;

            span {
              font-size: 16px;
              color: #fff;
              display: block;
              margin-bottom: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            div {
              width: 100%;
              position: relative;
              padding-bottom: 136.4%;
              background-color: #1a1a1a;
              border-radius: 15px;
              img {
                width: 100%;
                height: 100%;
                border-radius: 15px;
                position: absolute;
                top: 0;
                z-index: 1;
                left: 0;
                @include flex(row, center, center);
              }

              .target {
                position: absolute;
                top: 0;
                left: 0;
                width: 50px;
                height: 40px;
                z-index: 2;
                border-radius: 0px;
              }
            }
          }
        }
      }
    }

    .clist-item+.clist-item {
      margin-top: 10px;
    }
  }

  .turntable {
    width: 100%;
    position: relative;
    margin-top: 10px;

    .title {
      position: absolute;
      left: 10px;
      top: 10px;
      height: 24px;
      @include flex(row, flex-start, center);

      img {
        height: 24px;
        width: 24px;
        margin-right: 5px;
      }

      span {
        font-size: 15px;
        color: #fff;
      }
    }

    >img {
      width: 100%;
    }

    p {
      font-size: 16px;
      margin: 16px 0;
      text-align: center;
      color: #fff;
    }

    .btn {
      width: 70%;
      margin: 0 auto;
      height: 42px;
      border-radius: 5px;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      line-height: 42px;
      color: #fff;
      background-color: rgb(37, 154, 6);
    }
  }

  .Provider {
    padding-top: 20px;
    background-color: #1a1a1a;

    .title {
      height: 36px;
      line-height: 36px;
      margin-left: 10px;

      img {
        width: 24px;
        height: 24px;
        margin-right: 15px;
      }

      span {
        font-size: 24px;
        color: #fff;
      }
    }

    dl {
      width: 100%;
      padding: 3px 10px 15px;
      overflow-x: auto;
      @include flex(row, flex-start, center);
      flex-wrap: nowrap;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }

      dd {
        background-color: #32353e;
        height: 36px;
        line-height: 36px;
        border-radius: 5px;
        padding: 0 10px;
        @include flex(row, flex-start, center);

        img {
          height: 23px;
        }
      }

      dd+dd {
        margin-left: 10px;
      }
    }
  }

  .fg {
    width: 100%;
    height: 170px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .bottom-second {
    background-image: linear-gradient(0deg, #111214, #24262b 87%);
    width: 100%;
    padding: 24px 0 20px 0;

    h1 {
      width: 260px;
      font-size: 32px;
      color: #fff;
      margin: 0px auto 24px;

      span {
        font-size: 32px;
        color: rgb(102, 185, 102);
      }
    }

    .btn {
      width: 32%;
      margin: 0 auto;
      height: 42px;
      border-radius: 5px;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      line-height: 42px;
      color: #fff;
      background-color: rgb(37, 154, 6);
    }
  }
}
</style>
